<template>
        <div class="mui-numbox">
					<button class="mui-btn mui-btn-numbox-minus" type="button" @click.stop="subtract" :disabled="subDis">-</button>
					<input class="mui-input-numbox" type="number" :value="currentCount">
					<button class="mui-btn mui-btn-numbox-plus" type="button" @click.stop="plus" :disabled="plusDis">+</button>
		</div>
</template>

<script>

export default {
        props:[
            'initCount', //初始值
            'min',  //下限
            'max', //上限
            'goodsId', //对应商品Id
            'isChangeStore', //用来判断是否在修改商品个数的时候，影响仓储 [true/false]
        ],
        data(){
            return{
                currentCount:1,
                plusDis:false,
                subDis:true,
            }
        },
        methods:{
            judge(){
                if(this.currentCount >= this.max){
                    this.plusDis = true;
                    this.subDis  = false;
                }else{
                    if(this.currentCount <= this.min){
                        this.plusDis = false;
                        this.subDis  = true;
                    }
                else{
                     this.plusDis = false;
                    this.subDis  = false;
                }

                }
            },
            plus:function(){
                if(this.currentCount < this.max){
                    this.currentCount++;
                }
                this.judge();
            },
            subtract:function(){
                if(this.currentCount > this.min){
                    this.currentCount--;
                }
                this.judge();
            },

        },
        created(){
            this.currentCount = this.initCount;
        },
        // 这里使用onchange事件来监听数量的变化是不妥的
        // 因为w3c规定onchange事件有3个步骤，1.获取焦点2.数据变化 3. 失去焦点
        // 这里是没有焦点的，所以使用watch来监听currentCount
        watch:{
            'currentCount':function(newValue,oldValue){
                //1.数据发生变化，调用父组件传递过来的方法getCount,吧currentCount传递给父组件
                this.$emit("getCount",newValue);
                // 当数据更新的时候，调用仓储中提供的updataStore方法，更新仓储中的数据
                // 以此来更新购物车中的总价格
                // 在这里要传递过去一个对象，这个对象形如{id:goodsId,count:xx}
                console.log(this.isChangeStore);
                if(this.isChangeStore == true){
                    var goodsInfo = {id:this.goodsId,count:this.currentCount};
                    console.log(goodsInfo);
                   this.$store.commit('updataStore',goodsInfo);
                }
            }
        }
}
</script>

<style lang="less">

</style>